<!-- <h1>会员卡编辑和添加</h1> -->
<script setup lang='ts'>
import { reactive, ref, onMounted, computed } from "vue";
import type {
  FormInstance,
  FormRules,
  ElMessage,
  UploadProps,
} from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import formManagementVue from "../../components/formManagement.vue";
import { useRoute } from "vue-router";
import userManagement from "../../hooks/userManagement";
import searchById from "../../store/vipCard";

const route = useRoute();
const id = computed(() => Number(route.query.id));
const store = searchById();

const ruleForm = store.getSearchVipCardListById;
// const ruleForm = reactive({
//   id: '',
//   name: '',
//   cardType: '',
//   buyType: '',
//   buyCount: '',
//   bookingCount: '',
//   remark: '',
//   backgroundImage: '',
//   cardCount: '',
//   cardDay: '',
//   sellingPrice: '',
//   createTime: '',
//   price: '',
//   venues: [],
// })
const SearchVipCardById = (): void => {
  // console.log(123123);
  let Id: number = id.value;
  // console.log(Id);
  userManagement.search_vipCardById(Id);
};
onMounted(() => {
  // 页面加载完成后执行的函数
  SearchVipCardById();
  console.log(store.getSearchVipCardListById);
  console.log(333);
});

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
    console.log(ruleForm);

      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

// 上传头像
const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};
</script>
<!-- 模型 -->
<template>
  <div class="">
    <div>
      <el-row>
        <el-col :span="20"><div class="">会员卡编辑</div></el-col>
        <router-link to="/setVipCard">
          <el-col :span="4"
            ><el-button plain class=""> &lt; 返回</el-button></el-col
          ></router-link
        >
      </el-row>
    </div>
    <!-- 表单 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="200px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="会员卡名称：" prop="name">
        <el-col :span="6">
          <el-input v-model="ruleForm.name" placeholder="例：2次体验卡" />
        </el-col>
      </el-form-item>

      <el-form-item label="会员卡类型：" prop="cardType">
        <el-select v-model="ruleForm.cardType" placeholder="选择会员卡类型">
          <el-option label="次卡类型" value="0" />
          <el-option label="期卡类型" value="1" />
          <el-option label="储值类型" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="支持场馆：" prop="venues">
        <el-checkbox-group v-model="ruleForm.name">
          <el-checkbox label="健身仓山馆" name="type" />
          <el-checkbox label="健身馆" name="type" />
          <el-checkbox label="健身馆2" name="type" />
          <el-checkbox label="健身馆3" name="type" />
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="在线购买：" prop="buyType">
        <el-radio-group v-model="ruleForm.buyType">
          <el-radio label="支持" value="0" />
          <el-radio label="不支持" value="1" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="每名会员最多购买：" prop="name">
        <el-col :span="6">
          <el-input v-model="ruleForm.name" placeholder="不限制购买数" />
        </el-col>
      </el-form-item>
      <el-form-item label="每日可约次数上限：" prop="name">
        <el-col :span="6">
          <el-input v-model="ruleForm.name" placeholder="不限预约次数" />
        </el-col>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-col :span="6">
          <el-input v-model="ruleForm.remark" placeholder="" />
        </el-col>
      </el-form-item>
      <el-form-item label="会员卡背景" prop="name">
        <el-col :span="6">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-col>
        <el-col :span="6">
          <div>
            <el-button type="primary">上传图片</el-button
            >建议图片尺寸610*340，大小不超过2M。支持格式jpg、jpeg、gif、png
          </div>
        </el-col>
      </el-form-item>
      <div>
        <formManagementVue />
      </div>
      <el-form-item>
        <!-- <router-link to="/setVipCard"> -->
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <!-- </router-link> -->
        <el-button @click="resetForm(ruleFormRef)">重制</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>